<template>
  <div :class="$style.container" class="alert">
    <el-button round  @click.stop="handleItemClcick('isAdd')" :class="$style.btn" v-if="isAdd">新增</el-button>
    <el-button round  @click.stop="handleItemClcick('isEdit')" :class="$style.btn" v-if="isEdit">编辑</el-button>
    <el-button round  @click.stop="handleItemClcick('isDel')"  :class="$style.btn" v-if="isDel">删除</el-button>
    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div slot="title" :class="$style.alertTitle">温馨提示</div>
        <i class="el-icon-info" :class="$style.icon"/>
        <span :class="$style.content">请选择一条记录</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false" size="mini">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isAdd: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    isDel: {
      type: Boolean,
      default: false
    },
    currentRowData: {
      type:Object,
      default:() => {}
    }
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  computed:{
    isSelectRow () {
      if (Object.keys(this.currentRowData).length > 0) {
        return true
      }
      return false
    }
  },
  methods: {
    handleItemClcick (data) {
      if (data === 'isAdd') {
        this.$emit("btn_list", "add");
      } else if (data === 'isEdit') {
        if (this.isSelectRow) {
          this.$emit("btn_list", "edit");
        } else {
          this.dialogVisible = true
        }       
      } else if (data === 'isDel') {
        if (this.isSelectRow) {
          this.$emit("btn_list", "del");
        } else {
          this.dialogVisible = true
        }   
      }
    },
    // close
    handleClose () {
      this.dialogVisible = false
    }
  }
};
</script> 
<style lang="scss" module>
.container {
  display: inline-block;
  .btn {
    margin-left: 20px;
  }
  .alertTitle {
    font-size: 16px;
    color: #1c2438;
    font-weight: 700;
  }
  .icon {
    margin-right:10px;
    font-size:20px;
    color: #f90;
    vertical-align: middle;
  }
  .content{
    font-size: 14px;
    color: #495060;
  }
}
</style>
<style scoped>
  .alert >>> .el-dialog {
    border-radius: 8px;
  }
</style>